<template>
	<view class="content">
		<!-- chenchuang-tabs组件，根据文字自适应tab项宽度，支持自定义标题栏 -->
		<view style="margin-top:14px; margin-left: 8px; margin-right: 10px;">
			<!-- spaceLeft设置tabs间距 v-model：绑定选择序列 tabs: 选择数据 change：切换事件  -->
			<chenchuang-tabs spaceLeft="110" v-model="tabIndex" :tabs="tabs" @change="tabChange"></chenchuang-tabs>
			<!-- 列表组件 -->
			<cc-listView :productList="projectList" @click="goProDetail"></cc-listView>
			<!--  totalNum: 条目总数量  pageCount:设置分页数量  curPageNum:设置当前页-->
			<cc-listPageView :totalNum="totalNum" pageCount="10" :curPageNum="curPageNum" @pageClick="pageClick">
			</cc-listPageView>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 列表数组
				projectList: [],
				tabs: ['全部', '已归还', '未归还'],
				tabIndex: 0,

			}
		},
		mounted() {
			this.requestData();
		},
		methods: {
			tabChange() {
				console.log('切换 =' + this.tabIndex);
			},
			// 列表条目点击事件
			goProDetail(item) {
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			// 分页事件
			pageClick(tag) {

				if (tag === 0) {
					// 上一页 (不等于第一页)
					if (this.curPageNum > 1) {

						this.curPageNum--;
						this.requestData();
					}
				} else {
					// 下一页 (不等于最后一页)
					if (this.totalNum > (this.curPageNum * 10)) {
						this.curPageNum++;
						this.requestData();
					}
				}
			},
			requestData() {
				// 订单编号为当天日期+id
				let today = new Date();
				let year = today.getFullYear();
				let month = today.getMonth() + 1;
				let day = today.getDate();
				if (month < 10) {
				  month = "0" + month;
				}
				if (day < 10) {
				  day = "0" + day;
				}
				let date = year + "" + month + "" + day;
				// 模拟请求参数设置
				let reqData = {
					'area': '',
					"pageSize": 10,
					"pageNo": this.curPageNum
				}
				// 模拟请求接口
				this.totalNum = 39;
				this.projectList = [];
				for (let i = 0; i < 10; i++) {
					this.projectList.push({
						'proNumber': '订单编号' + date + i,
						'proName': '借还东西名称' + i,
						'borrowTime': '借用时间',
						'returnTime': '归还时间',
						'count': '数量',
						'id': i + '',
						'imgurl': '../../static/item/羽毛球.jpg'
					});
				}
			}
		}
	}
</script>

<style>
	page {

		background-color: #f6f6f6;
	}

	.content {
		display: flex;
		flex-direction: column;

	}
</style>